<template>
	<view class="container">
		
		<view class="top-one" v-if="show_userSite?false:true">
			<button type="default" @click="selectAddress">选择收货地址</button>
		</view>
		<view class="top-two" v-if="show_userSite?true:false">
			<text>收货地址:</text>
			<view class="name">姓名：{{show_userSite.name}}</view>
			<view class="address">地址：{{show_userSite.pcd+' '+ show_userSite.address}}</view>
			<view class="phone">电话号：{{show_userSite.phone}}</view>
			<navigator url="/pages/site/site">修改></navigator>
		</view>
		<view class="cart">
			<view class="cart-item" v-for="(item,index) in myCart" :key="index">
				<view class="picture">
					<image :src="item.image"></image>
				</view>
				<view class="text">
					<view>
						<span>{{item.name}}</span>
						<span>单价：￥{{item.price}}元</span>
					</view>
					<view class="number">x{{item.number}}</view>
				</view>
			</view>
		</view>
		<view class="middle" @click="selectCoupon">选择优惠券</view>
		<!-- <button type="default" @click="test">自己测试用</button> -->
		<view class="bottom">
			<view>合计：{{total - jianShaoMoney}}元</view>   
			<view @click="goPay">去支付</view>
		</view>
	</view>
</template>

<!-- 新支付页面 -->
<script>
	import {mapState,mapGetters} from 'vuex'
	import {BASE_URL} from '../../api/ajax.js'
	
	export default {
		data() {
			return {
				//结算价
				totalPrice: 0,
				//已优惠价
				totalYhPrice: 0,
				//商品数量
				totalNumber: 0,
				
				remark: "",
				eventChannel: {},
				// 上个页面传过来的
				myCart: [],
				jianShaoMoney: 0,
				usedCoupon: null
			}
		},
		
		onPageScroll(e){
		},
		
		computed: {
		  ...mapGetters(['show_userSite']),
		  ...mapState(['cart','show_user_address','userInformation','user_order']),
		  
		  total() {
		  	let price = this.myCart.reduce((acc, cur) => acc + cur.number * cur.price, 0)
			// 取小数后两位 四舍五入
			return Math.round((price * 100)) / 100
		  },
			
		},
		
		methods: {
			test() {
				console.log('------', this.usedCoupon)
				// this.eventChannel.emit('acceptDataFromOpenedPage', {data: '清空购物车'});
			},
			
			async goPay() {
				console.log('this.show_userSite',this.show_userSite)
				if(this.show_userSite && this.myCart.length != 0){
					// console.log('goPay-this.cart',this.cart)
					this.postArr = this.myCart.map(item=>{
						let obj={}
						// shopID: 代表商家id, 目前1001是写死的
						obj.shopID = 1001
						obj.userID=this.userInformation.userID
						obj.goodsID=item.id
						obj.spsl=item.number
						//要改
						obj.psdd=this.show_userSite.pcd+' '+this.show_userSite.name+' '+this.show_userSite.phone+' '+this.show_userSite.address
						// obj.psdd=this.show_userSite.pcd+' '+this.show_userSite.name
						return obj
					})
					console.log('postArr',this.postArr)
					
					// 提交购物车
					let res = await this.$request({
						url: '/supermarket/dd/postgwc',
						method:'POST',
						data:{
							list: this.postArr,
							totalMoney: this.total - this.jianShaoMoney
						}
					})
					
					console.log('成功支付,订单id = ', res.data)
					uni.showToast({
						title: '支付成功'
					})
					this.eventChannel.emit('acceptDataFromOpenedPage', {data: '清除购物车'});
					this.myCart = []
					this.jianShaoMoney = 0
					if(this.userInformation.isadmin==0){
						this.$store.dispatch('getUserOrder')
					}
					
					if (this.usedCoupon == null) {
						return
					}
					// 消耗掉优惠券
					res =  await this.$request({
						url: '/newtest/shop-mjq/useyhq/' + this.$store.state.userInformation.userID + '/' + this.usedCoupon.yhqID,
						method: 'POST'
					})
					console.log('消耗掉优惠券res = ', res)
					if(res.success) {
						this.usedCoupon == null
					}
				}else{
					uni.showToast({
						title:'请添加完整地址或选好您要购买的商品再行支付',
						icon:'none'
					})
				}
			},
			
			selectAddress(){
				uni.navigateTo({
				    // url: 'test?id=1'
					url:'../site/site'
				});
			},
			
			selectCoupon() {
				let that = this
				uni.navigateTo({
				    // url: 'test?id=1'
					url:'../selectCoupon/selectCoupon?money=' + this.total,
					events: {
						// 获取优惠券的价格
						getCouponPrice(data) {
							// console.log('获取优惠券的价格 = ', data)
							that.jianShaoMoney = data.data
							that.usedCoupon = data.coupon
							console.log('获取优惠券的价格 = ', that.jianShaoMoney)
						}
					}
				});
			}
	
		},
		
		onLoad(option){
			
			this.eventChannel = this.getOpenerEventChannel();
			// console.log('eventChannel', this.eventChannel)
			
			
			
			this.myCart = JSON.parse(decodeURIComponent(option.myCart))
			console.log('this。myCart = ', this.myCart)
		},
		
	}
</script>

<style lang="scss">
	page{background-color:#f5f5f5 !important;}
	.container{
		padding: 20rpx 20rpx;
	}
	.top-one{
		background-color: #fff;
		// border: 1rpx solid #f00;
		height: 200upx;
		border-radius: 20rpx;
		position: relative;
		button{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			width: 80%;
			background-color: #fff;
			border: 1rpx solid #02a774;
			border-radius: 30rpx;
			font-size: 30rpx;
		}
	}
	.top-two{
		background-color: #fff;
		// border: 1rpx solid #f00;
		padding: 10rpx 15rpx 0 15rpx;
		height: 200upx;
		border-radius: 20rpx;
		position: relative;
		text{
			font-weight: bold;
		}
		view{
			font-weight: lighter;
			font-size: 28rpx;
		}
		navigator{
			position: absolute;
			right: 15rpx;
			top: 10%;
			// top: 50%;
			// transform: translateY(-10%);
			background-color: #02a774;
			color: #fff;
			display: inline-block;
			padding: 5rpx;
			border-radius: 10rpx;
		}
	}
	.cart{
		background-color: #fff;
		margin-top: 15rpx;
		border-radius: 20rpx;
		padding: 20rpx 15rpx;
		.cart-item{
			// border: 1rpx solid #00f;
			// box-shadow: 0 4rpx 4rpx #bbb;
			margin: 10rpx 0;
			overflow: hidden;
			.picture{
				// border: 1rpx solid #f00;
				float: left;
				width: 180rpx;
				height: 180rpx;
				image{
					width: 180rpx;
					height: 180rpx;
				}
			}
			.text{
				// border: 1rpx solid #0f0;
				float: left;
				margin-left:10rpx ;
				width: 70%;
				height: 180rpx;
				view:nth-child(1){
					display: flex;
					justify-content: space-between;
					font-weight: bold;
				}
				view:nth-child(2){
					font-weight: lighter;
					margin-top: 10rpx;
					font-size: 28rpx;
				}
			}
		}
	}
	.middle{
		background-color: #fff;
		margin-top: 15rpx;
		padding: 20rpx 15rpx;
		border-radius: 20rpx;
		text-align: right;
	}
	.bottom{
		position: fixed;
		background-color: #fff;
		
		padding:10rpx 10rpx ;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		line-height: 80rpx;
		view:nth-child(1){
			width: 70%;
			font-weight: bold;
			display: inline-block;
		}
		view:nth-child(2){
			// border: 1rpx solid #00f;
			display: inline-block;
			width: 25%;
			text-align: center;
			background-color: #02A774;
			height:60rpx;
			line-height: 60rpx;
			vertical-align: middle;
			color: #fff;
			margin-top: 10rpx;
			border-radius:10rpx ;
		}
	}
</style>

